<template>
    <div class="queryproduct">
        <product-filter :status="status" @search="search">
        </product-filter>
        <!--搜索之后把搜到的数据传递-->
        <Empty v-if="queryPros.length==0">没有搜到任何数据</Empty>
        <div class="productlist" v-if="queryPros.length!==0" v-loading="loading">
            <header style="margin: 24px 0">
                已选中
                <span class="choosenum">{{num}}</span>项
                <!--num 统计true的值-->
                <el-dropdown type="primary" split-button @command="handleCommand">
                    <span class="el-dropdown-link">
                    批量操作
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>批量删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <export-file :api-info="downloadGoodsApi" style="margin-left: 20px;">导出全部商品</export-file>
            </header>

            <el-table ref="multipleTable" :data="queryPros" border tooltip-effect="dark"
                       @selection-change="handleSelectionChange"
                      style="width: 100%;">
                <el-table-column type="selection" width="58">
                </el-table-column>
                <el-table-column label="商品图片" width="100">
                    <template slot-scope="scope">
                        <img :src="processImg(scope.row.imgJson)" style="margin-top: 8px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                </el-table-column>
                <el-table-column label="类目" prop="categoryAndType">
                </el-table-column>
                <el-table-column label="最低租金" sortable>
                    <template slot-scope="scope">{{scope.row.displayRent | parsePrice}}</template>
                </el-table-column>
                <el-table-column label="新旧程度" sortable prop="oldLevelStr">
                </el-table-column>
                <el-table-column label="商品状态" prop="statusStr">
                </el-table-column>
                <!--相同-->
                <el-table-column label="失败提示" prop="checkExplanation">
                </el-table-column>
                <el-table-column label="退回时间" sortable>
                    <template slot-scope="scope">
                        {{scope.row.returnTime| parseTime}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toEdit(scope.row.id,scope.row.standardized)">重新编辑</el-button>
                        <el-button type="text" @click="deleteProducts(scope.row.id,scope.$index,scope.row.status)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
    import productFilter from './components/product_filter.vue';
    import Empty from '@/components/Empty'
    import {goodsDeleteByIds,exportProductsLists} from '@/api/goods'
    import {clearSession} from '@/utils/removeSession';
    import {host, osshost} from '@/api/util/fetch';
    import {getTab, setTab} from '@/utils/list';
    import {showMessage} from '@/utils/message';
    import ExportFile from '@/components/ExportFile';

    export default {
        name: 'productStatusCheckFailure',
        components: {
            'product-filter': productFilter,
            'Empty': Empty,
            'export-file': ExportFile,
        },
        props: {
            state: {
                type: String,
                default: ''
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            queryPros: {
                type: Array,
                default: []
            }
        },
        mounted() {
        },
        data() {
            return {
                status: '退回',
                setInventory: false,
                toEditor: false,
                statusTitle: '',
                num: 0,
//        设置库存table中的数据
//        响应报文中得到 数据  title
                ids: [],
                loading:false,

              downloadGoodsApi:{ //导出订单api
                url:'goods/exportGoods',
                method:'get',
                data:{},
              },

            }
        },
        created() {
            this.statusTitle = this.state[0];
//      将父组件传过来的status继续传递给product-filter.vue组件
            this.toEditor = this.isEdit;
        },
        methods: {
            search(){
//                console.log('搜索了');
                this.loading = true;

                    setTimeout(()=>{
                        this.loading = false;
                    },300);

            },
            processImg(url) {
                if (url && url !== '' || url && url !== '[]') {
                    url=JSON.parse(url)[0].url;
                    return osshost + url + '?x-oss-process=image/resize,m_fixed,h_60,w_60';
                }else {
                    return '';
                }
            },
            /*getCategory() {
                getFirCategory()
                    .then((resp) => {
                        for (let item of resp.data.list) {
                            let tmp = {
                                value: item.id,
                                label: item.name,
                                disabled: item.enabled
                            };
                            this.category.push(tmp);
                        }
//                        console.log(this.category)
                    })
                    .catch((err) => {
//                        console.log(err)
                    })
            },*/
            handleSelectionChange(val) {
//                console.log(val);
                this.num = val.length;
                let arr = [];
                for (let item of val) {
                    arr.push(item.id)
                }
                this.ids = arr;
//                console.log(this.ids)
            },
            renderTable() {
//        通过子组件传过来的数据 赋值

            },
            toEdit(id,standardized) {
                clearSession();
                this.$emit("get-id", id);
                this.toEditor = true;
                this.$emit("to-edit", this.toEditor);
                this.$emit('edit-type',standardized);
            },
            deleteProducts(id,index,status) {
//                删除
                this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = null;
                    if (typeof id !== 'number') {
                        data = id;
                    } else {
                        data = [id];
                    }


                    goodsDeleteByIds({status:'CHECK_RECYCLE',ids:data})
                        .then((resp) => {
//                            console.log(resp);
//                            console.log(index);

                            showMessage({
                                type: 'success',
                                title: '删除成功',
                            });
                            this.$emit('up-date', data);
                            this.$emit('is-change');
                        })
                        .catch((err) => {
//                            console.log(err);
                        });


                }).catch(() => {
                });

            },
            handleCommand() {
//                批量删除
                if(this.ids.length==0){
                    this.$message({
                        type:'warning',
                        message:'您还没选择要删除的商品'
                    });
                    return;
                }else {
                    this.deleteProducts(this.ids);
                }

            },
        }
    }
</script>

<style>

</style>